<template>
  <div id="page">
    <span>本页共{{pageCon}}条数据</span>
    <div>
      <span>共{{totalPage}}条记录</span>
      <span class="pageSize"><span @click="showFun" id="pageSize" class="el-icon-cdm-triangle-up">每页显示{{pageSize}}条</span>
      <ul :class="['clearfix','sizes',{'noShowSizes':!showSizes}]" id="sizes" >
        <li v-for=" (i,k) in sizes" :key="i" @click="changeSize(i)" :class="{'true':i==pageSize,'bottom':k>8,'right':(k+1)%3==0}">{{i}}</li>
      </ul>
      </span>
      <span>{{currentPage+'/'+totalPageNum}}</span>
      <span class="pageBtn  el-icon-d-arrow-left" v-if="currentPage==1"></span>
      <span class="pageBtn  el-icon-arrow-left"  v-if="currentPage==1"></span>
      <span class="pageBtn pointer el-icon-d-arrow-left" @click="getDate(1)" v-if="currentPage>1"></span>
      <span class="pageBtn pointer el-icon-arrow-left" @click="getDate('-')" v-if="currentPage>1"></span>
      <span class="pageBtn  el-icon-arrow-right"  v-if="currentPage==totalPageNum"></span>
      <span class="pageBtn  el-icon-d-arrow-right"  v-if="currentPage==totalPageNum"></span>
      <span class="pageBtn pointer el-icon-arrow-right" @click="getDate('+')" v-if="currentPage<totalPageNum"></span>
      <span class="pageBtn pointer el-icon-d-arrow-right" @click="getDate(totalPageNum)" v-if="currentPage<totalPageNum"></span>
    </div>
  </div>
</template>

<script>
  export default {
    props:['totalPage','pageCon'],//分别为总条数和当前页数量
    data:function(){
      return {
        currentPage: 1, //当前页
        pageSize: 10, //每页条数
        sizes:[5,10,15,20,25,30,35,40,45,50,100,200],//当前页数量
        showSizes:false//是否显示切换当前页数量
      }
    },
    methods:{
      changeSize(index){

        this.showSizes=false
        if(this.pageSize==index){//当前页
          return
        }
        this.pageSize=index
        this.getDate(1)
      },
      getDate(v){
        let currentPage=this.currentPage//当前页码
        let totalPageNum=this.totalPageNum//总页数
        if(v=='-'){//下一页
          this.currentPage=currentPage-1>1?currentPage-1:1
        }else if(v=='+'){//上一页
          this.currentPage=currentPage+1>=totalPageNum?totalPageNum:currentPage+1
        }else{
          this.currentPage=v
        }
        this.$emit('pageFun',this.currentPage,this.pageSize)//pageFun为父级页面请求接口方法
        this.$nextTick(function(){
          this.setPageWid()
        })
      },
      showFun(){//是否展示切换当前页数量
        if(this.$('#sizes').css('display')=='none'){
          this.showSizes=true
        }else{
          this.showSizes=false
        }
      },
      setPageWid(){
        document.getElementById('page').style.width=document.getElementById('page').parentElement.clientWidth+'px'//获取分页组件父级宽度
      }
    },
    computed:{
      totalPageNum:function(){//总页数
        return Math.ceil(this.totalPage/this.pageSize)
      }
    },
    mounted:function(){
      if(this.pageCon>this.pageSize){//显示分页切换到不足一页后切回时更改当前页数量
        this.pageSize=this.pageCon
      }
      this.setPageWid()
    },
    watch: {
      showSizes: function() {
        var sizes=document.getElementById("sizes");
        var pageSize=document.getElementById("pageSize");
        document.onclick=function(event){
        var e=event || window.event;//兼容ie和非ie的event
        var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
          if(aim!=sizes&&aim!=pageSize){
            sizes.classList.add("noShowSizes")
          }else{
            sizes.classList.remove("noShowSizes")
          }
        }
      },
      totalPage:function(nval,oval){
        this.currentPage=1
        this.setPageWid()
      }
    }
  }
</script>

